<!DOCTYPE>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		 
	</head>
	<style type="text/css">
		table {
			font-size: 20px;
			width: 300px;
			font-weight: bold;
		}
	</style>
	<script language="javascript" type="text/javascript" src="js/jq_3.4.1.js"></script>
	<script language="javascript" type="text/javascript">
		$(document).ready(function() {

			$("#btn1").click(function() {
				//创建tr节点
				var $tr = $("<tr></tr>");
				//遍历获取输入的内容
				$("#info input:text").each(function(index, domEle) {
					//添加td节点
					var $td = $("<td></td>");
					//将内容循环添加到创建好的TD中
					$td.append($(domEle).val());
					//将td添加到创建好的TR 中
					$td.appendTo($tr);
				});
				//创建TD--删除
				var $td = $("<td><a href='#' class='del'>删除</a></td>");
				//将内容循环添加到创建好的TD中
				$td.appendTo($tr);
				$tr.appendTo("#tab");

				//执行删除操作
				$(".del").click(function() {
					//alert("@@@@@@@@@@@@");
					$(this).parent().parent().remove();

				});
			});

		});
	</script>
	<body>
		<form id="info" method="post">
			姓名：<input type="text" id="user"></br>
			年龄：<input type="text" id="age"></br>
			性别：<input type="text" id="gender"></br>

			<input type="button" id="btn1" value="增加">
            <input type="button" id="" value="删除选中元素">
		</form>
		<br>
		<br>
		<br>
		<table id="tab" border="0" align="center" cellspacing="0" cellpadding="">
			<tr id="t1">
				 
				<td>name</td>
				<td>age</td>
				<td>gender</td>
				<td>操作</td>

			</tr>
		</table>

	</body>
</html>
